<template>
  <div class="login">
    <el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85">
      <div class="text-center relative">
        <h2>登录</h2>
      </div>
      <el-form :model="form" :rules="loginRules" ref="formRef" class="form">
        <!-- 用户 -->
        <el-form-item prop="username">
          <div class="flex items-center w-full">
            <svg-icon icon-class="user" class="mx-2" />
            <el-input
              v-model="form.username"
              name="username"
              size="large"
              class="h-[48px]"
              ref="username"
            />
          </div>
        </el-form-item>
        <!-- 密码 -->
        <el-tooltip :visible="isCapslock" placement="right">
          <el-form-item prop="password">
            <div class="flex items-center w-full">
              <svg-icon icon-class="lock" class="mx-2" />
              <el-input v-model="form.password" class="h-[48px] pr-2" />
            </div>
          </el-form-item>
        </el-tooltip>
        <el-form-item>
          <div class="flex items-center w-full">
            <svg-icon icon-class="captcha" class="mx-2" />
            <el-input v-model="form.password" />
            <el-image
              class="rounded-tr-md rounded-br-md cursor-pointer h-[48px]"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="w-full"
            :loading="loading"
            @click.prevent="onsubmit"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
import { LoginData } from "@/api/auth/model";
import type { FormInstance } from "element-plus";
import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
import router from "@/router";

const form = ref({
  username: "admin",
  password: "123456",
});
const userStore = useUserStore();

const formRef = ref<FormInstance>(); //登录表单ref
const isCapslock = ref(false); // 是否大写
const captchaKey = ref(""); // 验证码key
const loading = ref(false); // 登录按钮loading

// 正则
const loginRules = computed(() => {
  return {
    username: [
      {
        required: true,
        message: "请输入用户名",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
    captchaCode: [
      {
        required: true,
        message: "请输入验证码",
        trigger: "blur",
      },
    ],
  };
});

// 登录
const route = useRoute();
// const onsubmit = ()=>{
//   formRef.value?.validate((valid) => {
//     if (valid) {
//       loading.value = true;
//       userStore
//         .login(form.value as LoginData)
//         .then(() => {
//           loading.value = false;
//           const redirect = route.query.redirect as string;
//           router.push(redirect || "/");
//         })
//         .catch(() => {
//           loading.value = false;
//         });
//     }
//   });
// }
const onsubmit = () => {
  formRef.value?.validate((valid: boolean) => {
    // console.log(valid);
    if (valid) {
      loading.value = true;
      userStore.login(form.value).then(() => {
        const query: LocationQuery = route.query;
      });
    }
  });
};
</script>

<style scoped lang="scss">
html.dark .login {
  background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
}
.login-container {
  overflow-y: auto;
  background: url("@/assets/images/login-bg.jpg") no-repeat center right;

  @apply wh-full flex-center;

  .form {
    padding: 30px 10px;
  }
}

.el-form-item {
  background: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}

:deep(.el-input) {
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      /* 通过延时渲染背景色变相去除背景颜色 */
      transition: background-color 1000s ease-in-out 0s;
    }
  }
}
</style>